<script setup lang="ts">
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import { Swiper, SwiperSlide } from "swiper/vue"
import { Navigation, Pagination, Autoplay } from "swiper/modules"
import "swiper/css"
import "swiper/css/navigation"
import "swiper/css/pagination"
import "swiper/css/autoplay"

import jsonData from "#/index.json"
import { AdvertisingFormItem } from "@/api/admin/types"
import { getAdvertisingData } from "@/api/user/info"
import { getRecommendListByUser } from "@/api/position/index"
import { PositionDetails } from "@/api/position/type"
import { getResourceData, getAddressDetails } from "@/utils/transform"
import { getToken } from "@/utils/cache/cookies"

const router = useRouter()
const token = getToken()

// #region 轮播图
const modules = [Navigation, Pagination, Autoplay]
const swiperInstance = ref<typeof Swiper | null>()
const advertisingList = ref<AdvertisingFormItem[]>([])
// @ts-expect-error
const onSwiper = (swiper: Swiper): any => {
  swiperInstance.value = swiper
}
const onSlideChange = () => {}
const pauseSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value!.autoplay.stop()
  }
}
const resumeSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value!.autoplay.start()
  }
}
onMounted(() => {
  getAdvertisingData().then(({ data }) => {
    advertisingList.value = data
  })
})
// #endregion

// #region 推荐区域
const recommendList = ref<PositionDetails[]>([])
const getRecommendList = () => {
  const params = {
    current: 1,
    pageSize: 5,
    sortField: "updateTime"
  }
  getRecommendListByUser(params).then(({ data }) => {
    recommendList.value = data.records
  })
}

onMounted(() => {
  if (token) {
    getRecommendList()
  }
})
// #endregion
</script>

<template>
  <div class="slide-page">
    <swiper
      class="slide__swiper"
      :slides-per-view="1"
      :space-between="10"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
        delay: 2000,
        disableOnInteraction: false
      }"
      :loop="true"
      @swiper="onSwiper"
      @slide-change="onSlideChange"
      @mouseenter="pauseSwiper"
      @mouseleave="resumeSwiper"
    >
      <swiper-slide v-for="item in advertisingList" :key="item.id!">
        <img :src="item.redirectUrl" width="430" height="300" style="object-fit: cover" alt="" />
        <div class="advertising-title">{{ item.advertisingTitle }}</div>
      </swiper-slide>
    </swiper>
    <div class="side__recommend" v-if="token">
      <el-card class="recommend-item" v-for="li in recommendList" :key="li.id" shadow="never">
        <template #header>
          <div class="card-header">
            <el-row justify="space-between">
              <el-col :span="12">
                <el-text class="fw-700" type="primary" size="large">{{ li.workName }}</el-text>
              </el-col>
              <el-col :span="12">
                <el-text type="info">薪资范围</el-text>
                &nbsp;
                <el-text>{{ getResourceData(li.workPrice, { resource: jsonData.workPrice, key: "label" }) }}</el-text>
              </el-col>
            </el-row>
          </div>
        </template>
        <div class="card-content">
          <div class="work-tag">
            <div class="flex gap-2">
              <el-tag class="academic-degree" type="info">{{
                getResourceData(String(li.studyingExperience), {
                  resource: jsonData.studyacademicDegree,
                  key: "label"
                })
              }}</el-tag>
              <el-tag class="work-experience" type="info">
                {{ getResourceData(String(li.workTime), { resource: jsonData.workTime, key: "label" }) }}
              </el-tag>
            </div>
          </div>
        </div>
        <el-row justify="start" align="middle">
          <el-col :span="18">
            <div>
              <span class="company">
                <svg-icon name="company" />
                {{ li.companyVO.companyShortName }}
              </span>
              &nbsp;
              <span class="address">
                <span v-show="Array.isArray(li.workAddress) && li.workAddress.length !== 0" class="address">
                  <svg-icon name="address" />
                  <span style="font-size: 14px">{{ getAddressDetails(li.workAddress as any) }}</span>
                </span>
              </span>
            </div>
          </el-col>
          <el-col :span="6">
            <el-button plain @click="() => router.push(`/job-details/${li.id}`)">查看详情</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.slide__swiper {
  position: relative;
  text-align: center;
  .advertising-title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
}

.side__recommend {
  position: sticky;
  top: 20px;
  margin: 20px 10px 0;
  :deep(.el-card) {
    margin-bottom: 10px;
    :not(:last-child) {
      margin: 0;
    }
  }
}
</style>
